<template>
  <!-- 删除任务 -->
  <a-modal
    centered
    width="416px"
    class="disable-box-class"
    :open="show"
    :mask-closable="false"
    :ok-button-props="{ disabled: !inputValue }"
    :after-close="() => (inputValue = '')"
    :ok-text="okText"
    :confirm-loading="delTaskLoading"
    @ok="emits('ok', inputValue)"
    @cancel="cancel"
  >
    <template #title>
      <span class="modal-title">{{ title }}</span>
    </template>
    <div class="tips">
      <span class="icon"><i class="iconfont icon-error-warning-fill"></i></span>
      {{ msg }}
    </div>
    <div class="delConfirmation">{{ label }}*</div>

    <a-textarea v-model:value.trim="inputValue" type="text" :placeholder="label" :maxlength="textareaWordCount" :rows="4" show-count />
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  export interface Props {
    show?: boolean
    title?: string
    msg?: string
    label?: string
    confirmName?: string
    okText?: string
    textareaWordCount?: number
    delTaskLoading?: boolean
  }

  withDefaults(defineProps<Props>(), {
    show: false,
    title: '确认删除',
    msg: '此认证申请将被驳回，请确认操作！',
    label: '请填写驳回原因*',
    okText: '确定消息并推送',
    confirmName: '',
    textareaWordCount: 200
  })

  const emits = defineEmits(['ok', 'update:show'])

  const inputValue = ref('')

  const cancel = () => {
    console.log('cancel')

    inputValue.value = ''
    emits('update:show', false)
  }
</script>

<style lang="less" scoped>
  // 删除弹窗
  .tips {
    display: flex;
    margin-bottom: 24px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 24px;

    .icon {
      margin-right: 10px;
      font-size: 24px;
      color: #f59700;

      i {
        font-size: 24px;
      }
    }
  }

  .delConfirmation {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 22px;
    color: rgba(25, 25, 48, 0.45);

    .modelName {
      color: rgba(0, 0, 0, 0.75);
    }
  }

  .modal-title {
    margin-bottom: 12px;
    // font-weight: 700 !important;
    font-size: 14px;
    color: @text01;
    .font14b();
  }
</style>
<style>
  .disable-box-class .ant-modal-content {
    padding: 12px 0 20px !important;

    .ant-modal-close {
      top: 12px;
    }

    .ant-modal-body {
      padding: 24px 32px;
      margin-top: 0;
      border-top: 1px solid var(--background-background3, #f5f5f5);
    }

    .ant-modal-footer {
      padding: 20px 24px 0;
      margin: 0;
    }
  }
</style>
